<div id="materialEdit" style="height:100%">
    <div class="ui-layout-west">
        <div class="clearfix tbl materialEditTable" id="materialEditTable"></div>
    </div>
    <div class="ui-layout-center" id="materialForm">
    	
    </div>
</div>
<script>
    var MaterialEditFX = function() {
        var _self = this;
        _self.perform = function() {
            //dodavanje layout-a za parent div
            $("#materialEdit").layout({
                resizable: false,
                closable: false,
                west__size: "630"
            });
            $("#materialForm").load("_parts/2_Packaging/MaterialForm.html?x="+Math.random(), function() {
                $("#packagingMaterialForm").layout({
                    resizable: false,
                    closable: false,
                    west__size: "100"
                });
            });
            $("#materialEditTable").addScroll();
            _self.loadDataForMaterialTable();

            window.refreshAndSortTable = _self.refreshSortedTable;
        };
        _self.refreshSortedTable = function(table, columnName, ascDesc, callback){
            _self.table = table;
            _self.request = 250;

            _self.columnName = columnName;
            _self.sortItem = "";
            _self.ascDesc = ascDesc;
            _self.action = "getItems";

            _self.random = Math.random();
            _self.url = "js/tableParams/" + _self.request + ".json?x=" + random;

            $.get(_self.url, function(response) {
                $(response.desc).each(function(index,value){
                    if(value.title == columnName){
                        _self.sortItem = value.param;
                        return false;
                    }
                });

                var params = {
                    request: _self.request,
                    action: _self.action,
                    sortItem: _self.sortItem,
                    ascDesc: _self.ascDesc
                };

                window.tableConstructor.generateTable(params, callback);
            });

        };

        _self.loadDataForMaterialTable = function() {
            var params = {
                request: 250,
                action: "getItems"
            };
            window.tableConstructor.generateTable(params, function(){
                if(window.materialID !== undefined){
                    var id = materialID;
                    window.materialID = undefined;

                    $("body").css('cursor', 'wait');
                     _self.loadDataForMaterialEditForm(id,function(){
                        $("body").css('cursor', 'default');
                    });
                    $(".scrollable").scrollTo($("[data-id='"+id+"']"));
                    $("[data-id='"+id+"']").addClass("selected");
                }
            });
        };
        _self.loadDataForMaterialEditForm = function(recipe,callback) {
                var params = {
                    request: 251,
                    action: "getItems",
                    id : recipe
                };                

                $.getJSON(window.CONSTANTS.SERVICE_URL, params, function(response) {
                    $("#251_number")                .val(response[0].number);
                    if(response[0].mixingCostIncluded===1)
                        $("#251_mixingCostIncluded").attr('checked','checked');
                    else
                         $("#251_mixingCostIncluded").removeAttr("checked");

                    $("#251_description")           .val(response[0].description);
                    $("#251_Line").html("<option>" + response[0].Line + "</option>");
                    $("#251_weightPerUnit")         .val(response[0].weightPerUnit);
                    $("#251_unit").html("<option>" + response[0].unit + "</option>");
                    $("#251_pouchesPerUnit")        .val(response[0].pouchesPerUnit);
                    $("#251_modifiedBy")            .val(response[0].modifiedBy);
                    $("#251_unitPerHour")           .val(response[0].unitPerHour);
                    $("#251_modifiedDate")          .val(response[0].modifiedDate);
                    $("#251_speedGroup").html("<option>" + response[0].speedGroup + "</option>");
                    $("#251_notes")                 .val(response[0].notes);
                    if (callback) {
                        callback();
                    }
                });
        };
        _self.loadLinesForSelect = function(){
            console.log("lines");
        };
        _self.loadUnitsForSelect = function(){
            console.log("units");
        };
        _self.loadSpeedGroupsForSelect = function(){
            console.log("speedGroups");
        };
        _self.assignEventHandlers = function() {
            $(document).on("click", "#materialEdit .scrollable .row.data", function() {

                $("#materialEdit .scrollable .row.data").removeClass("selected");
                $(this).addClass("selected");

                var recipe = $($(this).find("div")[0]).html();

                $("body").css('cursor', 'wait');
                 _self.loadDataForMaterialEditForm(recipe,function(){
                    $("body").css('cursor', 'default');
                });
            });
            $(document).on("click", "#251_Line", _self.loadLinesForSelect );
            $(document).on("click", "#251_unit", _self.loadUnitsForSelect);
            $(document).on("click", "#251_speedGroup",_self.loadSpeedGroupsForSelect);
        };
        _self.clearEventHandlers = function() {
            $(document).off("click", "#materialEdit .scrollable .row.data");
            $(document).off("click", "#251_Line");
            $(document).off("click", "#251_unit");
            $(document).off("click", "#251_speedGroup");
        };
    };
    if(!window.pMaterialEditFX){
        window.pMaterialEditFX = new MaterialEditFX();
        window.pMaterialEditFX.perform();
        window.pMaterialEditFX.clearEventHandlers();
        window.pMaterialEditFX.assignEventHandlers();
    }
    else{
        window.pMaterialEditFX.perform();
        window.pMaterialEditFX.clearEventHandlers();
        window.pMaterialEditFX.assignEventHandlers();
    }
</script>